<template>
    <div ref="chartRef" :style="{width:'100%',height:'280px'}"></div>
</template>

<script setup>
import { ref,onMounted,defineProps, watch } from 'vue';
import * as echarts from 'echarts';

const props=defineProps({
    chartType:{
        default:'bar'
    },
    options:{
        default:()=>({})
    }
}) 

const chartRef=ref(null)
let chartInstance=null

watch(
    ()=>props.options,
    ()=>{
        if(chartInstance){
            chartInstance.setOption(props.options)
        }
    },
    {deep:true}
)
const initChart =()=>{
    chartInstance=echarts.init(chartRef.value)
    chartInstance.setOption({
        ...props.options,
        series:[
            {
                type:props.chartType,
                data:props.options.series && props.options.series[0].data,
                smooth:props.options.series
            }
        ]
    })
}
onMounted(()=>{
    initChart()
})

</script> 